<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>政务管理系统 - 公务管理</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 背景装饰元素 -->
        <div class="background-shapes">
            <div class="corner-block"></div>
            <div class="curve-shape curve-left"></div>
            <div class="curve-shape curve-right"></div>
        </div>
        
        <!-- 主要内容区域 -->
        <div class="main-content">
            <!-- 顶部导航栏 -->
            <div class="top-nav">
                <div class="nav-brand">
                    <i class="fas fa-shield-alt"></i>
                    <span>政务管理系统</span>
                </div>
                <div class="nav-user">
                    <span class="user-name">张三</span>
                    <div class="user-avatar">
                        <i class="fas fa-user-circle"></i>
                    </div>
                </div>
            </div>
            
            <!-- 内容主体 -->
            <div class="content-body">
                <!-- 左侧功能菜单 -->
                <div class="sidebar">
                    <div class="sidebar-header">
                        <h2 class="sidebar-title">功能导航</h2>
                        <div class="sidebar-title-bar"></div>
                    </div>
                    
                    <nav class="sidebar-nav">
                        <a href="index.html" class="nav-item">
                            <i class="fas fa-home nav-icon"></i>
                            <span class="nav-text">首页</span>
                        </a>
                        <a href="official-management.html" class="nav-item active">
                            <i class="fas fa-briefcase nav-icon"></i>
                            <span class="nav-text">公务管理</span>
                        </a>
                        <a href="#" class="nav-item">
                            <i class="fas fa-chart-bar nav-icon"></i>
                            <span class="nav-text">数据分析</span>
                        </a>
                        <a href="#" class="nav-item">
                            <i class="fas fa-cogs nav-icon"></i>
                            <span class="nav-text">系统管理</span>
                        </a>
                        <a href="#" class="nav-item">
                            <i class="fas fa-bullhorn nav-icon"></i>
                            <span class="nav-text">政务公告</span>
                        </a>
                        <a href="#" class="nav-item">
                            <i class="fas fa-building nav-icon"></i>
                            <span class="nav-text">单位组织</span>
                        </a>
                    </nav>
                </div>
                
                <!-- 右侧内容区域 -->
                <div class="main-panel">
                    <!-- 页面标题 -->
                    <div class="page-header">
                        <h1 class="page-title">公务管理系统</h1>
                        <p class="page-subtitle">管理请假申请和出差申请</p>
                    </div>
                    
                    <!-- 功能模块区域 -->
                    <div class="function-modules">
                        <!-- 请假提交模块 -->
                        <div class="module-card">
                            <div class="module-header">
                                <div class="module-icon">
                                    <i class="fas fa-calendar-times"></i>
                                </div>
                                <h3 class="module-title">请假提交</h3>
                            </div>
                            <div class="module-content">
                                <p class="module-description">提交请假申请，包括病假、事假、年假等类型</p>
                                <button class="module-btn" onclick="showLeaveForm()">
                                    <i class="fas fa-plus"></i>
                                    提交请假申请
                                </button>
                            </div>
                        </div>
                        
                        <!-- 出差提交模块 -->
                        <div class="module-card">
                            <div class="module-header">
                                <div class="module-icon">
                                    <i class="fas fa-plane"></i>
                                </div>
                                <h3 class="module-title">出差提交</h3>
                            </div>
                            <div class="module-content">
                                <p class="module-description">提交出差申请，包括出差目的、时间、地点等信息</p>
                                <button class="module-btn" onclick="showBusinessTripForm()">
                                    <i class="fas fa-plus"></i>
                                    提交出差申请
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 申请记录区域 -->
                    <div class="records-section">
                        <h3 class="section-title">申请记录</h3>
                        <div class="records-tabs">
                            <button class="tab-btn active" onclick="switchTab('leave')">请假记录</button>
                            <button class="tab-btn" onclick="switchTab('business')">出差记录</button>
                        </div>
                        
                        <div class="records-content">
                            <div id="leave-records" class="records-list active">
                                <div class="record-item">
                                    <div class="record-header">
                                        <span class="record-type leave">请假申请</span>
                                        <span class="record-status approved">已批准</span>
                                    </div>
                                    <div class="record-details">
                                        <p><strong>请假类型：</strong>年假</p>
                                        <p><strong>请假时间：</strong>2024-01-15 至 2024-01-17</p>
                                        <p><strong>请假原因：</strong>个人事务处理</p>
                                        <p><strong>申请时间：</strong>2024-01-10</p>
                                    </div>
                                </div>
                                
                                <div class="record-item">
                                    <div class="record-header">
                                        <span class="record-type leave">请假申请</span>
                                        <span class="record-status pending">待审批</span>
                                    </div>
                                    <div class="record-details">
                                        <p><strong>请假类型：</strong>病假</p>
                                        <p><strong>请假时间：</strong>2024-01-20 至 2024-01-22</p>
                                        <p><strong>请假原因：</strong>感冒发烧</p>
                                        <p><strong>申请时间：</strong>2024-01-18</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div id="business-records" class="records-list">
                                <div class="record-item">
                                    <div class="record-header">
                                        <span class="record-type business">出差申请</span>
                                        <span class="record-status approved">已批准</span>
                                    </div>
                                    <div class="record-details">
                                        <p><strong>出差目的：</strong>参加政务信息化会议</p>
                                        <p><strong>出差地点：</strong>北京市</p>
                                        <p><strong>出差时间：</strong>2024-01-25 至 2024-01-27</p>
                                        <p><strong>申请时间：</strong>2024-01-20</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 请假申请表单模态框 -->
    <div id="leaveModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>请假申请</h3>
                <span class="close" onclick="closeModal('leaveModal')">&times;</span>
            </div>
            <form class="modal-form" id="leaveForm">
                <div class="form-group">
                    <label for="leaveType">请假类型</label>
                    <select id="leaveType" required>
                        <option value="">请选择请假类型</option>
                        <option value="sick">病假</option>
                        <option value="personal">事假</option>
                        <option value="annual">年假</option>
                        <option value="maternity">产假</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="startDate">开始日期</label>
                        <input type="date" id="startDate" required>
                    </div>
                    <div class="form-group">
                        <label for="endDate">结束日期</label>
                        <input type="date" id="endDate" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="leaveReason">请假原因</label>
                    <textarea id="leaveReason" rows="4" placeholder="请详细说明请假原因..." required></textarea>
                </div>
                
                <div class="form-group">
                    <label for="contactPhone">紧急联系电话</label>
                    <input type="tel" id="contactPhone" placeholder="请输入紧急联系电话">
                </div>
                
                <div class="form-actions">
                    <button type="button" class="btn-secondary" onclick="closeModal('leaveModal')">取消</button>
                    <button type="submit" class="btn-primary">提交申请</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 出差申请表单模态框 -->
    <div id="businessTripModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>出差申请</h3>
                <span class="close" onclick="closeModal('businessTripModal')">&times;</span>
            </div>
            <form class="modal-form" id="businessTripForm">
                <div class="form-group">
                    <label for="tripPurpose">出差目的</label>
                    <input type="text" id="tripPurpose" placeholder="请输入出差目的" required>
                </div>
                
                <div class="form-group">
                    <label for="tripLocation">出差地点</label>
                    <input type="text" id="tripLocation" placeholder="请输入出差地点" required>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="tripStartDate">开始日期</label>
                        <input type="date" id="tripStartDate" required>
                    </div>
                    <div class="form-group">
                        <label for="tripEndDate">结束日期</label>
                        <input type="date" id="tripEndDate" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="tripDescription">出差详情</label>
                    <textarea id="tripDescription" rows="4" placeholder="请详细描述出差安排、行程等..." required></textarea>
                </div>
                
                <div class="form-group">
                    <label for="budget">预算金额（元）</label>
                    <input type="number" id="budget" placeholder="请输入预算金额">
                </div>
                
                <div class="form-actions">
                    <button type="button" class="btn-secondary" onclick="closeModal('businessTripModal')">取消</button>
                    <button type="submit" class="btn-primary">提交申请</button>
                </div>
            </form>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>
